<%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%-- ssx --%>
<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath %>">
    <title>商城首页轮播图</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <%-- 引用layui.css --%>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>js/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>css/common.css"/>
</head>
<body>
<div class="ibox">
    <div class="ibox-content bodycss">
        <section class="panel panel-padding ">

            <table class="layui-table"
                   lay-data="{
	                        id:'menuTeble',
	                        width:'auto',
	                        url:'Phone/queryPhone.do',
	                        page:false,
	                        even:true,
	                        skin:'row',
	                        limits:[10,20,30,40,50],
	                        limit:10}"
                   lay-filter="popedomLay">

                <thead>
                <tr>
                    <th lay-data="{type:'numbers', width:50}">序号</th>
                    <th lay-data="{field:'imgAddress', width:1000,align:'center', templet:'#imgAddress'}">图片预览</th>
                    <th lay-data="{fixed: 'right', width:300, align:'center', toolbar: '#popedomBar'}">操作</th>
                </tr>
                </thead>

            </table>

        </section>
    </div>
</div>

<!-- 对图片显示操作 -->
<script type="text/html" id="imgAddress">
    <img src="${fileServerUrl}{{d.imgAddress }}"/>
</script>

<style type="text/css">
    .layui-table-cell {
        text-align: center;
        height: auto;
        white-space: normal;
    }

    .layui-table img {
        max-width: 180px
    }

</style>


<script type="text/html" id="popedomBar">
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit">修改图片</a>
</script>
<script type="text/javascript" src="<%=basePath %>js/layui/layui.js"></script>
<script type="text/javascript">


    layui.config({
        base: "<%=basePath%>/js/common/"
    }).use(["common", "element", "layer", "form", "table", "jquery"], function () {
        var elem = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        layui.common.init();
        /**
         * 监听刷新表格
         */
        form.on('submit(seach)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            table.reload('menuTeble', {
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        });


        /*
             监听行事件

        **/
        table.on('tool(popedomLay)', function (obj) {
            var data = obj.data;
            var id = data.id;
            var imgAddress = data.imgAddress;
            //console.log(id + "---------" + imgAddress);

            if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    title: '修改图片',
                    content: 'phone/update.do?id=' + id + '&picPath=' + imgAddress,
                    area: ['600px', '500px'],
                    anim: 1,
                    offset: '100px',
                    isOutAnim: true,
                    maxmin: true,
                    resize: false,
                    moveOut: true,
                    zIndex: 99999,
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);//绑定父子之间的关系，用于数据传递，缺少则无法传递
                        body.contents().find("INPUT[name='id']").val(id);
                        body.contents().find("INPUT[name='imgAddress']").val(imgAddress);
                        //     console.log(body);
                    },
                    end: function () {
                        table.reload("menuTeble");
                    }

                });
            }
        });


        //新增
        $('#adds').on('click', function () {
            var that = this;
            active.adds(
                layer.open({
                    type: 2
                    , title: '新增'
                    , area: ['650px', '450px']
                    , shade: 0
                    , maxmin: true
                    , content: 'supplier/adds.do'
                })
            );
        });


        //监听头事件
        var $ = layui.$, active = {
            deletes: function () { //获取选中数据
                var checkStatus = table.checkStatus('menuTeble')
                    , data = checkStatus.data;
                //layer.alert(JSON.stringify(data));
            }

        };

        //批量删除
        $('#deletes').on('click', function () {
            active.deletes();
            var checkStatus = table.checkStatus('menuTeble');
            var data = checkStatus.data;
            //var nadate = JSON.stringify(data);
            //console.log(data);
            // layer.alert(JSON.stringify(data));
            $.ajax({
                url: "supplier/update.do",
                method: "post",
                data: {
                    "supplierId": data.supplierId
                },
                //小范围刷新
                success: function (data) {
                    table.reload('menuTeble', {
                        where: data.field
                    })
                }
            })


        });


    });
</script>

</body>
</html>
